<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            text-align: center;
            font-size: 80px;
            color: white;
            /* 添加阴影  */
            /* 前两个对应偏移值 前一个是左右 后一个上下  第三个是模糊值 第四个是颜色 */
            text-shadow: 3px 3px 10px black;
        }

        .content {
            width: 400px;
            height: 400px;
            border: 1px solid red;

            /* 设置水平位置居中 */
            margin: 0 auto;

            /* 打死不换行 用来处理文本换行 即使后面有多的字符也不换 */
            white-space: nowrap;
            /* 隐藏超出div的内容 */
            overflow: hidden; 
            /* 添加文本末尾的省略号 转变为省略 */
            text-overflow: ellipsis;

            /* 线性渐变的存在方式 */
            background-image: linear-gradient(red,yellow,blue);
        }
    </style>
</head>
<body>
    <h1>你好！</h1>

    <!-- 文本溢出以及文本换行 -->
     <div class="content">
        <!-- 文本溢出以及文本换行 -->
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio officia exercitationem porro! Itaque aliquam rerum repudiandae doloremque dolores possimus minima corporis modi animi laboriosam. Nulla facere aspernatur a tempora cum magni corporis nemo fugiat ex eaque, asperiores debitis quos in reprehenderit ipsam, ab repudiandae voluptatum amet earum dicta aliquid? Quidem odit quo illo, facilis perspiciatis eius quas laboriosam quasi commodi. Incidunt animi eum a dolore sint atque officiis provident repellat reprehenderit totam aliquid qui molestias, nobis vel fugit odio deleniti laboriosam repudiandae soluta quidem voluptatum quisquam? Magnam officia dolores voluptatibus minus dicta, molestiae officiis illo provident quas quaerat sunt aperiam.
     </div>
</body>
</html>